<template>
	<div class="xyx-wrap">
    <div id="main">
        <div class="xyx_main_top">
            <audio id="xiuxiumusic" src="https://img.wifenxiao.com/h5-wfx/music/xiuxiu.mp3"></audio>
            <div class="xyx_tit"></div>
            <div class="xyx" id="top">
                <div class="xyx_main whew" @click="handleClickXyx"></div>
                <div class="xyx_hand" v-if="showHand"></div>
                <p v-if="showHand">连续点击咻一下有惊喜!</p>
            </div>
        </div>
        <div class="xyx_main_bottom">
            <div class="x-same xyx_top_dzp">
                <div class="x-img">
                    <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
                    <b>活动奖品</b>
                </div>
                <ul class="prize-list" v-if="gameprizeinfo && gameprizeinfo.length > 0">
                  <li>一等奖：{{ gameprizeinfo[0].msg }} </li>
                  <li>二等奖：{{ gameprizeinfo[1].msg }} </li>
                  <li>三等奖：{{ gameprizeinfo[2].msg }} </li>
                  <li>普通奖：{{ gameprizeinfo[3].msg }}</li>
                </ul>
            </div>
            <div class="x-same xyx_int_dzp">
                <div class="x-img">
                    <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
                    <b>活动时间</b>
                </div>
                <p>{{ gameinfo.start_time }} 至 {{ gameinfo.end_time }}</p>
            </div>
            <div class="x-same xyx_int_dzp">
                <div class="x-img">
                    <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
                    <b>活动规则</b>
                </div>
                <div class="align-left">
                  <p class="wordWrap">{{ gameinfo.description }}</p>
                  <p v-if="gameinfo.cost_point > 0">游戏消耗{{ point_name }} {{ gameinfo.cost_point }}</p>
                  <p v-if="gameinfo.give_point > 0">参与游戏即送{{ gameinfo.give_point }}{{ point_name }},
                    <span v-if="gameinfo.give_point_to_no_prize_only == 1">仅送给未中奖的用户.</span>
                  </p>
                </div>
            </div>
            <div class="win-record x-same">
                <div class="x-img">
                        <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/luckyWheel/xian.png">
                        <b>中奖排名</b>
                </div>
                <p class="goto"><a @click="JumpTo">查看我的奖品>></a></p>
                <div class="win-nav">
                    <span>昵称</span>
                    <span>奖品</span>
                    <span>等级</span>
                    <span>中奖时间</span>
                </div>
                <ul>
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text=""
                    @load="onLoad"
                  >
                    <li v-for="(item, index) in winerLists" :key="index">
                      <span class="win-name">{{ item.nickname }}</span>
                      <span class="win-award">{{ item.winer }}</span>
                      <span class="win-award">{{ item.level }}</span>
                      <span class="win-time">{{ item.create_time }}</span>
                    </li>
                  </van-list>
                </ul>
            </div>
        </div>
        <game-result-dialog
          :visible.sync="gameResultVisible"
          :game_prize_id="game_prize_id"
          :getGamePrize="getGamePrize"
          @gameReload="gameReload"></game-result-dialog>
    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <shop-code ref="shopCode" :fromType="1"></shop-code>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)
  import gameResultDialog from '../components/gameResultDialog'
  import { activityGame, playGames } from '@/api/marketGame/gameList'
  import { refreshPage, mpShare } from '@/utils/utils'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  import ShopCode from '@/components/ShopCode'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        loading: false,
        finished: false,
        gameResultVisible: false, // 游戏结果弹窗
        need_subscribe: 0,
        count: 0, // 点击次数
        showHand: true, // 小手显示隐藏
        bstop: 1,
        gameinfo: {},
        gameprizeinfo: [],
        point_name: '',
        cost_point: '',
        give_point: '',
        winerLists: [],
        postParm: {},
        postData: {
          type: 9,
          id: '',
          order_id: '',
          p: 1
        },
        game_prize_id: '', // 获奖数据
        getGamePrize: false // 中奖或是未中奖
      }
    },
    components: {
      gameResultDialog,
      SmallLogin,
      ShopCode
    },
    methods: {
      // 加载更多
      onLoad() {
        this.activityGameFn()
      },
      JumpTo() {
        this.$JumpName(this, 'prize-list')
      },
      /**
       * 点击咻一咻按钮
       */
      handleClickXyx() {
        // document.querySelector('#xiuxiumusic').play()
        // TODO 小程序播放
        document.querySelector('#xiuxiumusic').$$getContext().then(context => {
          context.play()
          // console.log(context)
            // 这里的 context 仅限于文档中支持的那些：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.context.html
        })
        this.count++
        this.showHand = false
        document.querySelector('.xyx_main').style.transform = 'scale(1.1)'
        document.querySelector('.xyx_main').classList.add('scale')
        // $('.xyx_main').css('transform', 'scale(1.1)').addClass('scale')
        setTimeout(() => {
          document.querySelector('.xyx_main').style.transform = 'scale(1.1)'
          // $('.xyx_main').css({ 'transform': 'scale(1)' })
        }, 500)
        setTimeout(() => {
          document.querySelector('#xiuxiumusic').$$getContext().then(context => {
            context.pause()
          })
          // document.querySelector('#xiuxiumusic').pause()
          document.querySelector('.xyx_main').classList.remove('scale')
          this.getGift()
        }, 1200)
      },
      getGift() {
        if (this.count > 8 && this.bstop) {
          this.count = 0
          this.bstop = 0
          playGames(this.postParm).then(res => {
            // console.log(res)
            const resData = res.data
            if (res.status == 1) {
              if (resData.game_parameter) {
                this.gameResultVisible = true
                this.game_prize_id = res.data.game_parameter.game_prize_id
                if (resData.game_parameter.ds && resData.game_parameter.ds.winning_value == 1) {
                  this.getGamePrize = true
                } else {
                  this.getGamePrize = false
                  if (resData.game_parameter.notwinning) {
                    const baseMsg = this.gameinfo.give_point > 0 ? `,别灰心参与也有${this.gameinfo.give_point}${this.point_name}` : ''
                  const noPrizeMsg = resData.game_parameter.notwinning + baseMsg
                    this.game_prize_id.noPrizeMsg = noPrizeMsg
                  }
                }
              }
            } else {
              this.getGamePrize = false
              this.$Error(res.msg)
            }
          })
        }
      },
      /**
       * 游戏的默认请求
       */
      activityGameFn() {
        activityGame(this.postParm).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.need_subscribe = resData.need_subscribe
            if (resData.need_subscribe == 1) {
              this.$refs.shopCode.dialogVisible = true
              return false
            }
            this.gameprizeinfo = resData.gameprizeinfo
            this.winerLists.push(...resData.winer_lists)
            this.gameinfo = resData.gameinfo
            this.point_name = resData.point_name
            this.cost_point = resData.cost_point
            this.give_point = resData.give_point
            // 加载状态结束
            this.loading = false
            if (resData.winer_lists.length < 10) {
              this.finished = true
            }
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: resData.jsapi_url.split('?')[1]
            }
            this.postParm.p++
            mpShare(true, false, '/activity/pages/xyxGame/index', this.shareInfo)
          } else {
            // this.$Error(res.msg)
          }
        })
      },
      init() {
        const param = Object.assign({}, this.postData)
        param.id = this.$route.query.id
        if (this.$route.query.id) {
          param.order_id = this.$route.query.order_id
        }
        this.postParm = param
        this.activityGameFn()
      },
      gameReload(){
        refreshPage(this)
        this.init()
      }
    },
    mounted() {
      this.init()
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        small.HandleShareParams()
        if(!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.init()
        }
      })
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/game.scss';
  .xyx-wrap{
    padding-top: 20px;
    background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/xyxGame/xyxbg.png) no-repeat #000036 center;
    background-size: cover;
    text-align: center;
    /* 咻一咻游戏样式 */

    .xyx {
    	width: 100%;
    	margin: 160px auto 0;
    	height: 400px;
    }
    /* 标题样式 */
    .xyx_tit {
    	margin: 20px auto 0;
    	width: 95%;
    	height: 210px;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/xyxGame/xyx_title.png) no-repeat;
    	background-size: contain;
    	background-size: 100% 100%;
    }

    .xyx_main {
    	width: 224px;
    	height: 224px;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/xyxGame/xyx_main.png) no-repeat center;
    	background-size: cover;
    	margin: 0 auto;
    	position: relative;
      &::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 10px 10px #0e0e41;
        border-radius: 50%;
        transform: scale(1.1);
        border: 2px solid #363660;
        top: -2px;
        left: -2px;
        animation: scale 2s infinite;
      }
    }
    .xyx_main_top .scale:before {
    	position: absolute;
    	content: '';
    	width: 100%;
    	height: 100%;
    	box-shadow: inset 0 0 10px 10px #0e0e41;
    	border-radius: 50%;
    	transform: scale(1.1);
    	border: 2px solid #363660;
    	top: -2px;
    	left: -2px;
    	animation: scale2 3s infinite;
    }

    .xyx_hand {
    	width: 68px;
    	height: 82px;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/xyxGame/xyx_click.png) no-repeat center;
    	background-size: cover;
    	margin: 100px auto 0;
    }

    #top p {
    	color: #b3b3c3;
    	text-align: center;
    	font-size: 30px;
    	margin-top: 24px;
    }

    .xyx_main_bottom {
    	margin-top: 100px;
    	overflow: hidden;
    }

    .x-same {
    	color: #fee58c !important;
    	margin: 0 20px;
    	color: #fff;
      .x-img{
        margin:7% 0 7% 6%;
        position: relative;
        img{
          width:100%;
        }
      }
      .align-left{
        text-align: left;
      }
      .prize-list{
        text-align: left;
      }
      b {
      	display: block;
      	letter-spacing: 14px;
      	font-size: 32px;
      	font-weight: bold;
      	position: absolute;
      	top: -4px;
      	left: 49%;
      	transform: translate(-50%);
      }
    }

    .xyx_top_dzp ul li {
    	line-height: 50px;
    	margin-left: 5%;
    	font-size: 26px;
    	letter-spacing: 2px;
    	display: block;
    }

    .xyx_int_dzp p {
    	line-height: 50px;
    	font-size: 26px;
      margin-left:5%;
    	letter-spacing: 2px;
    }

    .xyx_int_dzp pre {
    	color: #fee58c !important;
    	line-height: 50px;
    	margin-left: 3%;
    	font-size: 26px;
    	letter-spacing: 2px;
    }

    .support p {
    	color: #fff;
    }

    @keyframes scale {

    	0%,
    	100% {
    		transform: scale(1.1)
    	}

    	50% {
    		transform: scale(1.3)
    	}
    }

    @-webkit-keyframes scale {

    	0%,
    	100% {
    		transform: scale(1.1)
    	}

    	50% {
    		transform: scale(1.3)
    	}
    }

    @keyframes scale2 {

    	0%,
    	100% {
    		transform: scale(1.1)
    	}

    	50% {
    		transform: scale(3);
    		opacity: 0
    	}
    }

    @-webkit-keyframes scale2 {

    	0%,
    	100% {
    		transform: scale(1.1)
    	}

    	50% {
    		transform: scale(3);
    		opacity: 0
    	}
    }
  }
</style>
